<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .big-box .small-box1 h2 {
            /*color: red;*/
            /*background-color: #42cedd;*/
        }

        .container > div {
            border: 1px solid #f00;
        }

        ul li:hover {
            background-color: #42cedd;
            /*鼠标形状：手型*/
            cursor: pointer;
        }

        /*ul li:first-child{*/
        /*    color: red;*/
        /*}*/
        /*ul li:last-child{*/
        /*    color: blue;*/
        /*}*/
        /*ul li:nth-child(odd) {*/
        /*    color: rgba(208, 10, 238, 0.65);*/
        /*}*/

        /*ul li:nth-child(even) {*/
        /*    color: rgb(215, 38, 38);*/
        /*}*/

        /*ul li:nth-child(-n+2) {*/
        /*    color: rgba(208, 10, 238, 0.65);*/
        /*}*/

        ul li:nth-child(-n+3) {
            color: rgb(215, 38, 38);
        }
    </style>
</head>
<body>
<ul>
    <li>标题1</li>
    <li>标题2</li>
    <li>标题3</li>
    <li>标题4</li>
    <li>标题5</li>
    <li>标题6</li>
</ul>


<!--<div class="container">-->
<!--    <div>-->
<!--        box1盒子内容-->
<!--        <div>box2盒子内容</div>-->
<!--    </div>-->
<!--</div>-->

<!--<div class="big-box">-->
<!--    <div class="small-box1">-->
<!--        <h2>标题1 </h2>-->
<!--    </div>-->
<!--    <div class="small-box2">-->
<!--        <h2>标题2</h2>-->
<!--    </div>-->
<!--</div>-->


</body>
</html>
